import React from 'react';
import { Empty, Upload, Icon, Card, Radio } from 'antd';
import { connect } from 'dva';

import styles from './index.less';

const namespace = 'theme';
/**
 *  登录界面
 */
@connect(({ theme, loading }) => ({
  loading,
  themeList: theme.themeList,
  selectTheme: theme.selectTheme
}))
class Theme extends React.Component {
  state = {
    fileList: []
  };
  handleUpload = file => {
    const { dispatch, themeList } = this.props;
    dispatch({
      type: `${namespace}/commonUpload`,
      payload: {
        file
      },
      callback: res => {
        dispatch({
          type: `${namespace}/saveTheme`,
          payload: {
            ...themeList[themeList.length - 1],
            logourl: res.url
          }
        });
        this.state.fileList.push({
          ...file.file,
          url: res.url
        });
        this.setState({
          fileList: this.state.fileList
        });
      }
    });
  };
  render() {
    const { fileList } = this.state;
    const { themeList } = this.props;
    // console.log(themeList, 'themeList')
    const uploadButton = (
      <div>
        <Icon type={this.state.loading ? 'loading' : 'plus'} />
        <div className="ant-upload-text">Upload</div>
      </div>
    );
    return (
      <div className={styles.theme}>
        <h2>Setting</h2>
        <Card title="Please select a theme" bordered={false}>
          <div className={styles.imgList}>
            <Radio.Group
              onChange={value => {
                console.log(value);
                this.props.dispatch({
                  type: `${namespace}/saveTheme`,
                  payload: {
                    ...themeList.filter(a => a.id === value.target.value)[0],
                    red: 1
                  }
                });
              }}
              value={
                themeList && themeList.filter(a => a.red === 1).length > 0
                  ? themeList.filter(a => a.red === 1)[0].id
                  : -1
              }
            >
              {themeList.length > 0 ? (
                themeList.map(item => (
                  <div className={styles.ditem} key={item.id}>
                    <img src={item.logourl} alt="" className={styles.poster} />
                    <Radio value={item.id}></Radio>
                    {item.red === 1 && <div className={styles.selectBox}></div>}
                  </div>
                ))
              ) : (
                <Empty />
              )}
            </Radio.Group>
          </div>
        </Card>
        <Card title="Upload company logo" bordered={false} style={{ width: '30%', marginTop: 20 }}>
          <Upload
            name="avatar"
            listType="picture-card"
            className="avatar-uploader"
            fileList={fileList}
            customRequest={file => this.handleUpload(file)}
          >
            {uploadButton}
          </Upload>
        </Card>
      </div>
    );
  }
}
export default Theme;
